﻿(function () {
    "use strict";

    var appView = Windows.UI.ViewManagement.ApplicationView;
    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/groupedItems/groupedItems.html", {

        // This function updates the ListView with new layouts
        initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

            if (viewState === appViewState.snapped) {
                listView.itemDataSource = Data.groups.dataSource;
                listView.groupDataSource = null;
                listView.layout = new ui.ListLayout();
            } else {
                listView.itemDataSource = Data.items.dataSource;
                listView.groupDataSource = Data.groups.dataSource;
                listView.layout = new ui.GridLayout({
                    groupHeaderPosition: "top",
                    groupInfo: function () {
                        return {
                            enableCellSpanning: true,
                            cellWidth: 250,
                            cellHeight: 250
                        };
                    }

                });
            }
        },

        itemInvoked: function (args) {
            if (appView.value === appViewState.snapped) {
                // If the page is snapped, the user invoked a group.
                var group = Data.groups.getAt(args.detail.itemIndex);
                nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey: group.key });
            } else {
                // If the page is not snapped, the user invoked an item.
                var item = Data.items.getAt(args.detail.itemIndex);
                nav.navigate("/pages/itemDetail/itemDetail.html", { item: Data.getItemReference(item) });
            }
        },

        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var listView = element.querySelector(".groupeditemslist").winControl;
            listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
            listView.itemTemplate = function (itemPromise) {
                return itemPromise.then(function (item) {

                    var div = document.createElement("div");
                    div.style.height = "250px";
                    div.style.width = "250px";
                    var childDiv = document.createElement("div");
                    var title;
                    switch (item.data.importancia) {
                        case "alta":
                            div.style.height = "510px";
                            childDiv.style.padding = "10px";
                            title = document.createElement("h2");
                            div.style.backgroundColor = "red";
                            break;
                        case "media":
                            div.style.width = "510px";
                            childDiv.className = "item-overlay";
                            title = document.createElement("h3");
                            div.style.backgroundColor = "blue";
                            break;
                        case "baja":
                            childDiv.className = "item-overlay";
                            title = document.createElement("h4");
                            div.style.backgroundColor = "green";
                            break;
                        default:
                            div.style.msGridRows = "1fr 90px";
                            div.style.backgroundColor = "rgb(250,150,0)";
                            title = document.createElement("h5");
                            childDiv.style.backgroundColor = "rgba(0,0,0,0.5)";
                            childDiv.style.msGridRow = "2";
                            childDiv.style.padding = "10px";
                            var image = new Image();
                            image.src = "/images/logo.png";
                            image.style.width = "100%";
                            image.style.height = "100%";
                            image.style.msGridRowSpan = "2";
                            div.appendChild(image);
                            break;
                    }

                    title.className = "item-title";
                    title.innerText = item.data.title;
                    childDiv.appendChild(title);
                    div.appendChild(childDiv);

                    return div;
                });
            };
            //element.querySelector(".itemtemplate");

            listView.oniteminvoked = this.itemInvoked.bind(this);

            this.initializeLayout(listView, appView.value);
            listView.element.focus();
        },

        // This function updates the page layout in response to viewState changes.
        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />
            /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
            /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />

            var listView = element.querySelector(".groupeditemslist").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listView.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listView.addEventListener("contentanimating", handler, false);
                    this.initializeLayout(listView, viewState);
                }
            }
        }
    });
})();
